<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //1 遍历数组
    let arr = [1,2,3,4,5]
    console.log(...arr); //1 2 3 4 5 展开运算符
    //2 当做数组的参数  数组深拷贝
    let arr_1 = [...arr]
    arr_1.push(6)
    console.log(arr_1);  //[1,2,3,4,5,6]
    console.log(arr); //[1,2,3,4,5]
    console.log(...arr,...arr_1) //1 2 3 4 5 1 2 3 4 5 6
   //3 当做函数的参数  
   function fn(x,y){
    console.log(x) //1
    console.log(y) //2

   }
   fn(...arr)
   //4 解构赋值
   let [a,b,...rest] = arr
   console.log(a); //1
   console.log(b); //2
   console.log(rest); //[3,4,5]
   console.log(...rest); //3 4 5 展开运算符
   //5 将伪数组转化为数组
   var str = "hello"
   console.log(...str); //h e l l o
</script>
<script>
    //1 对象的扩展运算符
    let obj = {
        name:"zs",
        age:18,
        object: {age:19}

    }
    let obj_1 = {...obj}
    obj_1.name = "ls";
    obj_1.object.age = 20;
    console.log(obj_1); //{name: 'ls', age: 18, sex: '男'}
    console.log(obj); //{name: 'zs', age: 18, sex: '男'}
    //2 合并对象
    let obj_2 = {
        name:"zs",
        age:18,
    }
    let obj_3 = {sex:"男",age:19,...obj_2};
    console.log(obj_3); //{sex: '男', age: 18, name: 'zs'} 后面的属性会覆盖前面的属性
    // let obj_4 = {...obj_3,...obj_2}
    // console.log(obj_4)
    </script>
</html>